﻿@model List<OnlineEducation.Data.Entities.ApplicationUser>
@{
    ViewData["Title"] = "学生管理";

}

@section Styles{

    <link href="~/assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />

    <link href="~/assets/libs/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />

    <style>
        @@media (min-width: 576px) {
            .modal-dialog {
                max-width: 50% !important;
            }
        }

       
 
    </style>
}

<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">学生信息</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">学生信息</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row hsm">
        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-primary">
                            <i class="mdi mdi-text-subject font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">3,947</span></h3>
                            <p class="text-muted mb-1 text-truncate">全部学生</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-success">
                            <i class="fe-check-circle font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">3195</span></h3>
                            <p class="text-muted mb-1 text-truncate">有效学生</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-danger">
                            <i class="mdi mdi-playlist-remove font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">128</span></h3>
                            <p class="text-muted mb-1 text-truncate">付费学生</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-danger">
                            <i class="mdi mdi-playlist-remove font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">0</span></h3>
                            <p class="text-muted mb-1 text-truncate">账号锁定</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card-box">

                <button onclick="ShowPopup('/Student/Add/')" type="button" class="btn btn-primary  waves-effect waves-light float-right ladda-button" data-style="expand-left">
                    新增学生
                </button>


                <h4 class="header-title mb-4">学生管理</h4>

                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                    <table class="table table-small-font  table-striped" id="datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th width="10%" data-priority="1">登录账号</th>
                                <th width="10%" data-priority="1">姓名</th>
                                <th data-priority="2">性别</th>
                                <th data-priority="2">生日</th>
                                <th data-priority="2">手机</th>
                                <th data-priority="2">邮箱</th>
                                <th data-priority="2" width="8%">状态</th>
                                <th data-priority="2" width="8%">建立日期</th>
                                <th width="5%" data-priority="1" class="hidden-sm">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div><!-- end col -->
        </div>
        <!-- end row -->

    </div>
    <div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
        </div>
    </div><!-- /.modal -->
    </div>
    @section Scripts{
        @await Html.PartialAsync("_ValidationScriptsPartial")
        <script src="~/assets/libs/moment/moment.min.js"></script>
        <script src="~/assets/libs/flatpickr/flatpickr.min.js"></script>
        <script src="~/assets/libs/flatpickr/zh.js"></script>

        <script src="~/assets/libs/clockpicker/bootstrap-clockpicker.min.js"></script>
        <script src="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>

        <script>
 

            var table;

            $(function () {

                table = $('#datatable').DataTable({
                    "oLanguage": {
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "对不起，没有匹配的数据",
                        "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                        "sInfoEmpty": "没有匹配的数据",
                        "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                        "sProcessing": "正在加载中...",
                        "sSearch": "全文搜索：",
                        "oPaginate": {
                            "sFirst": "第一页",
                            "sPrevious": " 上一页 ",
                            "sNext": " 下一页 ",
                            "sLast": " 最后一页 "
                        }
                    },
                    language: {
                        paginate:
                            { previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>" }
                    },
                    drawCallback: function () { $(".dataTables_paginate > .pagination").addClass("pagination-rounded"); $('.table-responsive').responsiveTable('update'); },

                    "responsive": true,
                    "lengthChange": false,
                    "searching": true,
                    "order": [[7, 'desc']],
                    "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2, 3, 4, 5, 6, 0, 8] }],
                    "serverSide": true,
                    ajax: {
                        url: '/Student/GetAll',
                        type: 'POST',
                        async: true,
                        data: function (data) {

                            return {
                                param: data
                            };
                        },
                        error: function (jqXHR) {

                            HandleGlobalException(jqXHR);

                        }
                    },

                    columns: [
                        {
                            title: "登录账号",
                            data: "UserName",
                            name: "UserName",

                        },
                        {
                            title: "姓名",
                            data: "FullName",
                            name: "FullName"
                        },
                        {
                            title: "性别",
                            data: "Gender",
                            name: "Gender",
                            render: function (data, type, row) {

                                if (data == 1) {
                                    return "男"
                                }
                                else {
                                    return "女"
                                }
                            }
                        },
                        {
                            title: "生日",
                            data: "BirthDate",
                            name: "BirthDate",
                            render: function (data, type, row) {
                                return window.moment(data).format("YYYY-MM-DD");
                            }
                        },

                        {
                            title: "手机",
                            data: "PhoneNumber",
                            name: "PhoneNumber"
                        },
                        {
                            title: "邮箱",
                            data: "Email",
                            name: "Email"
                        },
                        {
                            title: "状态",
                            data: "Status",
                            name: "Status",
                            render: function (data, type, row) {


                                if (data == 1) {
                                    return "<span class='badge badge-success'>正常</span>"
                                }
                                else {
                                    return "<span class='badge badge-dark'>锁定</span>"
                                }
                            }
                        },
                        {
                            title: "建立日期",
                            data: "CreatedTime",
                            name: "CreatedTime",
                            render: function (data, type, row) {
                                return window.moment(data).format("YYYY-MM-DD HH:mm:ss");
                            }
                        },
                        {
                            title: "操作",
                            data: null,
                            name: null,
                            render: function (data, type, row) {

                                var html = "<div class='btn-group dropdown'>" +
                                    "<a href='javascript: void(0);' class='table-action-btn dropdown-toggle arrow-none btn btn-outline-secondary waves-effect btn-sm' data-toggle='dropdown' aria-expanded='false'><i class='ti-menu'></i></a>" +
                                    "<div class='dropdown-menu dropdown-menu-left'>" +
                                    "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Student/View/" + row["Id"] + "\")'><i class='mdi mdi-eye mr-2 text-muted font-18 vertical-middle'></i>查看</a>" +
                                    "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Student/Edit/" + row["Id"] + "\")'><i class='mdi mdi-pencil mr-2 text-muted font-18 vertical-middle'></i>修改</a>";

                                if (row["Status"] == 1) {
                                    html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["Id"] + "\")'><i class='mdi mdi-lock mr-2 text-muted font-18 vertical-middle'></i>锁定</a>";
                                } else {
                                    html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["Id"] + "\")'><i class='mdi mdi-key mr-2 text-muted font-18 vertical-middle'></i>解除锁定</a>";
                                }
                                html = html + "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Student/ChangePassword/" + row["Id"] + "\")'><i class='mdi mdi-textbox-password mr-2 text-muted font-18 vertical-middle'></i>修改密码</a>";
                                html = html + "<a class='dropdown-item' href='#' onclick='Remove(\"" + row["Id"] + "\")'><i class='mdi mdi-delete-forever mr-2 text-muted font-18 vertical-middle'></i>删除</a></div></div>";

                                return html;

                            }
                        }

                    ]


                });
            });



            function ShowPopup(url) {
                var modalId = 'modalDefault';
                var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
                $.get(url)
                    .done(function (response) {
                        modalPlaceholder.html(response);
                        popup = $('#' + modalId + '').modal({
                            keyboard: false,
                            backdrop: 'static'
                        });
                    }) ;
            }


            function SubmitForm(form, url) {
                $(form).removeData('validator');
                $(form).removeData('unobtrusiveValidation');
                $.validator.unobtrusive.parse(form);
                if ($(form).valid()) {
                    var data = $(form).serializeJSON();
                    data = JSON.stringify(data);

                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        contentType: 'application/json',
                        success: function (data) {
                            if (data.success) {
                                popup.modal('hide');
                                ShowMessage(data.message);
                                table.draw();

                            } else {
                                ShowMessageError(data.message);
                            }
                        } 
                    });

                }
                return false;
            }

            function Remove(id) {


                Swal({
                    // title: "删除",
                    text: "确定删除?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#dd4b39",
                    confirmButtonText: "是的，删除!",
                    cancelButtonText: "取消",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,

                }).then(function (willdelete) {
                    console.log(willdelete);
                    if (!willdelete.value) return;
                    $.ajax({
                        type: 'POST',
                        url: '/Student/Delete/' + id,
                        success: function (data) {
                            if (data.success) {
                                ShowMessage(data.message);
                                table.draw();
                            } else {
                                ShowMessageError(data.message);
                            }
                        } 
                    });
                });


            }

            function UpdateStatus(id) {

                $.ajax({
                    type: 'POST',
                    url: '/Student/ChangeStatus/' + id,
                    success: function (data) {
                        if (data.success) {
                            ShowMessage(data.message);
                            table.draw();
                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });



            }
        </script>
    }
